<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>添加门锁</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
	</head>
	<style type="text/css">
		#app {
			width: 600px;
			margin: 50px auto;
			padding: 10px 0;
			/*border: 1px solid #1B6D85;
			box-shadow: 1px 2px 30px #1B6D85;*/
		}
		/*#app select {
			width: 50%;
			height: 28px;
			font: 14px/28px "";
		}
		
		#app input {
			width: 50%;
			height: 28px;
			font: 14px/28px "";
		}
		
		#app div {
			width: 80%;
			margin: 0 auto;
			text-align: center;
		}*/
		
		#app label {
			font-size: 14px;
			font: 14px/34px "";
		}
	</style>

	<body>
		<div id="app">

			<form role="form">
				<div class="form-group">
					<label>门锁位置：</label>
					<select v-model="leixing1" class="form-control" name="leixing" id="leixing" @change="changeType">
						<option v-for="(item,index) in leixing" :value="item.id" v-text="item.name"></option>
					</select>
				</div>
				<div v-if="show_lou" class="lou form-group" style="margin-top: 15px;">
					<label>选择楼宇：</label>
					<select v-model="lou1" class="form-control" name="lou" id="lou" @change="changedanyuan">
						<option v-for="(item,index) in lou" :value="item.id" v-text="item.buildname"></option>
					</select>
				</div>
				<div v-if="show_lou" class="danyuan form-group" style="margin-top: 15px;">
					<label>选择单元：</label>
					<select v-model="danyuan1" class="form-control" name="danyuan" id="danyuan">
						<option v-for="item in danyuan" :value="item.id"  v-text="item.unitname"></option>
					</select>
				</div>
				<div class="lanya form-group" style="margin-top: 15px;">
					<label>门锁类型：</label>
					<select v-model="lanya1" class="form-control" name="lanya" id="lanya">
						<option v-for="item in lanya" :value="item.lanyaid" v-text="item.lanya_main"></option>
					</select>
				</div>

				<div class="suoname form-group" style="margin-top: 15px;">
					<label>门锁名字：</label>

					<input v-model="suoname" class="form-control" placeholder="请输入门锁名字">
				</div>
				<div class="danyuan1 form-group" style="margin-top: 15px;">
					<label>输入锁号：</label>

					<input v-model="suohao" class="form-control" placeholder="请输入锁号">
				</div>
				<button id="sure_button" style="display: block; margin: 50px auto;" type="button" class="btn btn-info " @click="sureSub">确认提交</button>
				<button style="display: block; margin: 50px auto;" type="button" class="btn btn-info " @click="gotolib">去门锁列表</button>
			</form>

			<!--<h2 style="text-align: center; padding-top: 50px;">添加门锁号</h2>-->
			<!--<div class="wuye" style="margin-top: 50px;">
				<label>选择物业：</label>
				<select v-model="wuye1" name="wuye" id="wuye" @change="changeWuye">
					<option v-for="(item,index) in wuye" :value="item.organizeid">{{ item.shortname }}</option>
				</select>
			</div>
			<div class="xiaoqu" style="margin-top: 15px;">
				<label>选择小区：</label>
				<select v-model="xiaoqu1" name="xiaoqu" id="xiaoqu" @change="changeLou">
					<option v-for="(item,index) in xiaoqu" :value="item.areaid">{{ item.areaname }}</option>
				</select>
			</div>-->
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script>
	new Vue({
		el: '#app',
		data: {
			urlr: "",
			type: false,
			danyuanhao: "",
			tips_modal: "",
			suohao: "",
			wuye1: "",
			xiaoqu1: "",
			leixing1: "",
			lou1: "",
			danyuan1: "",
			lanya1: "",
			suoname: "",
			areaid: "",
			merchantid: "",
			parameter: "",
			show_lou: false,
			danyuan: [{
				unitname: "请选择单元",
				id: "000"
			}, ],
			lanya: [{
					lanya_main: "请选择门锁类型",
					lanyaid: "000"
				},
				{
					lanya_main: "普通蓝牙门锁",
					lanyaid: "1"
				}, {
					lanya_main: "云对讲",
					lanyaid: "2"
				},

			],
			wuye: [{
				shortname: '请选择物业',
				organizeid: "000"
			}],
			xiaoqu: [{
				areaname: '请选择小区',
				areaid: "000"
			}],
			leixing: [{
					name: '请选择区域',
					id: 000
				}, {
					name: '小区大门',
					id: 1
				},
				{
					name: '楼宇门锁',
					id: 2
				}

			],
			lou: [{
					buildname: '请选择楼',
					id: 000
				},

			],
		},

		mounted: function() {
			this.parameter = window.location.search;
			var userid = getUrlParam('userid');
			var createusername = getUrlParam('realname');
			var merchantid = getUrlParam('merchantid');
			this.merchantid = merchantid;
			var areaid = getUrlParam('areaid');
			this.areaid = areaid;
			if(userid == null || userid == '') {
				//				alert("用户id不能为空")
				this.tips_modal = "用户id不能为空";
				$('#myModal_tips').modal('show');
				this.val_te = true;
				return;
			}
			if(createusername == null || createusername == '') {
				//				alert("用户姓名不能为空");
				this.tips_modal = "用户姓名不能为空";
				$('#myModal_tips').modal('show');
				this.val_te = true;
				return;
			}
			if(areaid == null || areaid == '') {
				//				alert("小区id不能为空");
				this.tips_modal = "小区id不能为空";
				$('#myModal_tips').modal('show');
				this.val_te = true;
				return;
			}
			if(merchantid == null || merchantid == '') {
				//				alert("物业id不能为空");
				this.tips_modal = "物业id不能为空";
				$('#myModal_tips').modal('show');
				this.val_te = true;
				return;
			}
			this.changeLou();
		},

		created: function() {
			var that = this;
			var aa = getUrl();
			that.urlr = aa;
			this.wuye1 = this.wuye[0].organizeid;
			this.leixing1 = this.leixing[0].id;
			this.xiaoqu1 = this.xiaoqu[0].areaid;
			this.lou1 = this.lou[0].id;
			this.danyuan1 = this.danyuan[0].id;
			this.lanya1 = this.lanya[0].lanyaid;
			//			console.log(that.urlr)
			//获取物业公司
			//			$.ajax({
			//				contentType: "application/json; charset=utf-8",
			//				type: "POST",
			//				url: that.urlr + "/public/selectOrganizeNameList",
			//				data: "",
			//				async: true,
			//				dataType: "json",
			//				success: function(msg) {
			//					console.log(msg);
			//					if(msg.code == 200) {
			//						var aa = JSON.parse(msg.returnString);
			//
			//						var te = {
			//							shortname: '请选择物业',
			//							organizeid: "000"
			//						}
			//						aa.unshift(te);
			//						console.log(aa);
			//						that.wuye = aa;
			//						that.wuye1 = that.wuye[0].organizeid;
			//					} else {
			//						alert(msg.disp)
			//					}
			//				},
			//				error: function() {
			//					alert("获取信息失败");
			//				}
			//			});

		},
		methods: {
			gotolib: function() {
				var url_lib = "doorlock.html" + this.parameter;
				window.location.href = url_lib;
			},
			//			//物业改变出现小区
			//			changeWuye: function() {
			//				var that = this;
			//				var wuyee = this.wuye1;
			//				console.log(wuyee);
			//				var data = {
			//					"parentid": wuyee
			//				}
			//				var data = JSON.stringify(data)
			//				$.ajax({
			//					contentType: "application/json; charset=utf-8",
			//					type: "POST",
			//					url: that.urlr + "/public/selectPropertyCommunityList",
			//					data: data,
			//					async: true,
			//					dataType: "json",
			//					success: function(msg) {
			//						console.log(msg);
			//						if(msg.code == 200) {
			//							var aa = JSON.parse(msg.returnString);
			//							var te = {
			//								areaname: '请选择小区',
			//								areaid: "000"
			//							}
			//							aa.unshift(te);
			//							console.log(aa);
			//							console.log(that);
			//
			//							that.xiaoqu = aa;
			//							that.xiaoqu1 = that.xiaoqu[0].areaid;
			//							//							that.xiaoqu1 = that.xiaoqu[0].organizeid;
			//						} else {
			//							alert(msg.disp)
			//						}
			//					},
			//					error: function() {
			//						alert("获取信息失败");
			//					}
			//				});
			//			},
			//小区改变出现楼号
			changeLou: function() {
				var that = this;
				var id = that.areaid;;
				//				console.log(xiaoquq);
				var data = {
					"parentid": id
				}
				var data = JSON.stringify(data)
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/public/selectBuildList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						//						console.log(msg);
						if(msg.code == 200) {
							var aa = JSON.parse(msg.returnString);
							var te = {
								buildname: '请选择楼宇',
								id: "000"
							}
							aa.unshift(te);
							//							console.log(aa);
							//							console.log(that);

							that.lou = aa;
							that.lou1 = that.lou[0].id;
							//							that.xiaoqu1 = that.xiaoqu[0].organizeid;
						} else {
							//							alert(msg.disp)
							that.tips_modal = msg.disp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//			
			//楼出现改变单元
			changedanyuan: function() {
				//				debugger
				var that = this;
				var lou = that.lou1;
				//				console.log(lou);
				var data = {
					"parentid": lou
				}
				var data = JSON.stringify(data)
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/public/selectUnitsList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						//						console.log(msg);
						if(msg.code == 200) {
							var aa = JSON.parse(msg.returnString);

							var te = {
								unitname: '请选择单元',
								id: "000"
							}
							aa.unshift(te);
							//							console.log(aa);
							that.danyuan = aa;
							that.danyuan1 = that.danyuan[0].id;
						} else {
							//							alert(msg.disp)
							that.tips_modal = msg.disp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			changeType: function() {
				var tyype = this.leixing1;
				//				console.log(tyype)
				if(tyype == 1) {
					this.type = false;
					this.show_lou = false;
					//					console.log(this.type);
					this.lanya = [{
							lanya_main: "请选择门锁类型",
							lanyaid: "000"
						},
						{
							lanya_main: "普通蓝牙门锁",
							lanyaid: "1"
						}
					];
					this.lanya1 = this.lanya[0].lanyaid;
				} else {
					this.type = true;
					this.lanya = [{
							lanya_main: "请选择门锁类型",
							lanyaid: "000"
						},
						{
							lanya_main: "普通蓝牙门锁",
							lanyaid: "1"
						}, {
							lanya_main: "云对讲",
							lanyaid: "2"
						},

					];
					this.lanya1 = this.lanya[0].lanyaid;
					this.show_lou = true;
				}

			},
			//提交前判断类型（确定传递的参数）
			sureSub: function() {
				//				debugger
				var that = this;
				var tyype = that.leixing1;
				var areaid = that.areaid;
				var buildid = that.lou1;
				var units = that.danyuan1;
				var doorlocksn = that.suohao;
				var suoname = that.suoname;
				var iscloud = that.lanya1;
				var data = {
					kind: tyype,
					buildid: buildid,
					units: units,
					doorlocksn: doorlocksn,
					doorlockname: suoname,
					areaid: areaid,
					iscloud: iscloud
				}
				if(tyype == 1) {
					if(doorlocksn == "" || suoname == "" || iscloud == "") {
						//						alert("请确认信息完整")
						that.tips_modal = "请确认信息完整";
						$('#myModal_tips').modal('show');
					} else {
						that.ffff(data);
					}
				} else if(tyype == 2) {
					if(buildid == 000 || units == 000 || doorlocksn == "" || suoname == "" || iscloud == "") {
						//						alert("请确认信息完整")
						that.tips_modal = "请确认信息完整";
						$('#myModal_tips').modal('show');
					} else {
						that.ffff(data);
					}
				} else {
					//					alert("请确认信息完整")
					that.tips_modal = "请确认信息完整";
					$('#myModal_tips').modal('show');
				}
				//				var areaid = that.areaid;
				//				var buildid = that.lou1;
				//				var units = that.danyuan1;
				//				var doorlocksn = that.suohao;
				//				var suoname = that.suoname;
				//				var iscloud = that.lanya1;
				//				if(buildid == 000 || units == "" || doorlocksn == "" || suoname == "" || iscloud == "") {
				//					alert("请确认信息完整")
				//				} else {
				//					var data = {
				//						kind: tyype,
				//						buildid: buildid,
				//						units: units,
				//						doorlocksn: doorlocksn,
				//						doorlockname: suoname,
				//						areaid: areaid,
				//						iscloud: iscloud
				//					}
				//					console.log(data);
				//					that.ffff(data);
				//				}

			},
			ffff: function(data) {
				$('#sure_button').prop('disabled', true);
				var that = this;
				//				console.log(data);
				var data = JSON.stringify(data);
				//				console.log(data);
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/doorLock/addDoorLock",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						//						console.log(msg);
						if(msg.code == 200) {
							//							alert("添加成功");
							that.tips_modal = "添加成功";
							$('#myModal_tips').modal('show');
							var url_lib = "doorlock.html" + that.parameter;
							//							window.location.href = url_lib;
							$('#myModal_tips').on('hide.bs.modal', function() {
								window.location.href = url_lib
							})
						} else {
							//							alert(msg.disp);
							that.tips_modal = msg.disp;
							$('#myModal_tips').modal('show');
							$('#sure_button').prop('disabled', false);
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
						$('#sure_button').prop('disabled', false);
					}
				});
			}
		}
	})
</script>